var CardMode = function () {
  var CardModeItem = function () {
    var template = /* html */ `
      <div class="card-mode-item">
        <el-card class="material-card" shadow="hover" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <div class="material-card-title">
              <span :title="material.materialName">{{material.materialName}}</span>
            </div>
          </div>
          <div class="material-img" title="单击查看物料详情" @click="lookDetail">
            <el-image v-if="material.showImgUrl!==''" :src="material.showImgUrl" fit="scale-down"></el-image>
            <el-image v-else src="https://upload.shinehao.com.cn/20190309140127non-data.png?imageMogr/auto-orient" fit="scale-down"></el-image>
          </div>
          <div class="material-card-content">
            <div class="clearfix">
              <div style="color:#f40" v-if="material.unitPrice">
                <span>¥</span>
                <span style="font-weight:bold">{{material.unitPrice.toFixed(2)}}</span>
              </div>
              <div style="float:right" v-if="material.unit!==''">单位:{{material.unit}}</div>
            </div>
            <div class="clearfix">
              <div class="label">规格型号:</div>
              <div class="text">{{material.model}}</div>
            </div>
            <div class="clearfix">
              <div class="label">编号:</div>
              <div class="text">{{material.color}}</div>
            </div>
            <div class="clearfix">
              <div class="label">描述:</div>
              <div class="text">{{material.colorDescription}}</div>
            </div>
            <div class="clearfix" v-if="modeType==='released'">
              <div class="label">库存数量:</div>
              <div class="text">{{material.count}}</div>
            </div>
            <div style="text-align:center;margin-top:3px" v-if="hasBtn">
              <slot :material="material"></slot>
            </div>
          </div>
        </el-card>
      </div>
    `;

    return {
      props: {
        material: {
          type: Object,
          required: true
        },
        hasHandle: {
          type: Boolean,
          default: false
        },
        modeType: {
          type: String,
          default: 'released'
        }
      },

      computed: {
        hasBtn: function () {
          return this.$slots.default || this.$scopedSlots.default;
        }
      },

      data: function () {
        return {};
      },

      methods: {
        lookDetail: function () {
          var material = this.material;
          this.$emit('detail', material);
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="card-mode" v-loading.fullscreen.lock="loading">
      <card-mode-item ref="cardItem" v-for="material in materialList" :key="'material_'+material.id" :material="material" :has-handle="hasHandle"
        :mode-type="modeType" @detail="lookDetail">
        <template slot-scope="scope">
          <template v-if="hasHandle">
            <template v-if="modeType==='released'">
            <el-button size="mini" type="primary" @click="importMaterialToComany(scope.material)">导入物料</el-button>
            <el-button size="mini" type="primary" @click="purchaseMaterial(scope.material,'once')">采购</el-button>
            </template>

            <template v-if="modeType==='import'">
            <el-button size="mini" type="primary" @click="purchaseMaterial(scope.material,'again')">采购</el-button>
            </template>
          </template>
        </template>
      </card-mode-item>
      <template v-if="spaceNum!==0">
        <div v-for="num in spaceNum" :key="'space_'+num" class="card-mode-item">
        </div>
      </template>

      <prompt-form title="采购数量" :visible.sync="openDialog" :option="purchaseOption" :data="selectMaterial" width="250px"
        @closed="dialogClosed" @ensure="toPurchaseMaterial"></prompt-form>
      
      <el-dialog append-to-body fullscreen class="dialog-fullscreen" title="" :visible.sync="openFormDialog" top="10vh" width="60%" @closed="formDialogClosed">
        <div style="height:100%;overflow:auto">
          <material-detail v-if="openFormDialog" :material="selectMaterial" :has-handle="hasHandle">
          </material-detail>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      materialList: {
        type: Array,
        required: true
      },
      hasHandle: {
        type: Boolean,
        default: false
      },
      modeType: {
        type: String,
        default: 'released'
      }
    },

    watch: {
      'materialList.length': function () {
        this.calSpaceNum();
      }
    },

    data: function () {
      return {
        loading: false,
        spaceNum: 0,
        openDialog: false,
        openFormDialog: false,
        selectMaterial: null,
        purchaseOption: {},
        purchaseType: ''
      };
    },

    mounted: function () {
      var self = this;
      $(this.$el).resize(function () {
        self.calSpaceNum();
      });
      self.calSpaceNum();
    },

    methods: {
      lookDetail: function (material) {
        this.selectMaterial = material;
        this.openFormDialog = true;
      },

      calSpaceNum: function () {
        var self = this;
        this.$nextTick(function () {
          var items = self.$refs['cardItem'];
          var len = items.length;
          var spaceNum = 0;
          if (len !== 0) {
            var totalWidth = $(self.$el).width();
            var width = $(items[0].$el).outerWidth();
            var count = Math.floor(totalWidth / (width - 1));
            if (count > 5) {
              count = 5;
            }
            if (count > 0) {
              spaceNum = len % count;
            }
            if (spaceNum !== 0) {
              spaceNum = count - spaceNum;
            }
          }
          this.spaceNum = spaceNum;
        });
      },

      importMaterialToComany: function (material) {
        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/importShoppingMaterialToMyCompany', {
          id: material.id
        }).then(function () {
          self.loading = false;
          self.$alert('该物料成功导出', '信息');
        }).catch(function () {
          self.loading = false;
        });
      },

      purchaseMaterial: function (material, type) {
        var unit = material.unit;
        var precision = SysUtil.getMaterialNumberPrecision(unit, 4);

        var formItems = [{
          type: 'number',
          field: 'count',
          label: '采购数量',
          placeholder: '请输入采购数量',
          precision: precision,
          min: 1 / Math.pow(10, precision)
        }];

        this.purchaseOption = {
          formItems: formItems
        };
        this.selectMaterial = material;
        this.purchaseType = type;
        this.openDialog = true;
      },

      toPurchaseMaterial: function (inputData) {
        var count = inputData.count;
        if (count === undefined) {
          this.$alert('请输入采购数量', '信息');
          return;
        }

        var purchaseType = this.purchaseType;
        if (purchaseType === 'once') {
          this.toOncePurchaseMaterial(count);
        } else if (purchaseType === 'again') {
          this.toAgainPurchaseMaterial(count);
        }
      },

      toOncePurchaseMaterial: function (count) {
        var material = this.selectMaterial;
        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/purchaseShoppingCallMaterial', {
          id: material.id,
          purchaseCount: count
        }).then(function () {
          self.openDialog = false;
          self.$alert('该物料采购成功', '信息');
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      toAgainPurchaseMaterial: function (count) {
        var material = this.selectMaterial;
        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/purchaseImportRecordMaterial', {
          materialCode: material.materialCode,
          agent: material.company,
          purchaseCount: count
        }).then(function () {
          self.openDialog = false;
          self.$alert('该物料采购成功', '信息');
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      dialogClosed: function () {
        this.selectMaterial = null;
        this.purchaseType = '';
        this.purchaseOption = {};
      },

      formDialogClosed: function () {
        this.selectMaterial = null;
      }
    },

    components: {
      CardModeItem: CardModeItem,
      MaterialDetail: MaterialDetail,
      PromptForm: PromptForm
    },

    template: template
  };
}();
